<template>
  <div class="table-wrap">
    <div class="table-head-wrap">
      <table class="task-table">
        <thead>
          <tr :style="computedHeaderStyle">
            <th>名称</th>
            <th>状态</th>
            <th>被监测设备</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body-wrap">
      <table class="task-table">
        <tbody>
          <tr
            v-for="(item, index) in tableData"
            :key="item.id"
            :style="[computedBodyStyle, bodyTableBg(index)]"
            @click="goTaskDetail(item)"
          >
            <td>{{ item.name }}</td>
            <td>{{ item.state === 1 ? '开启' : '关闭' }}</td>
            <td>{{ item.monitorDeviceName }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TaskApi } from '@/api/vmiot/task'
import { ref, computed, watch, onMounted } from 'vue'
import type { CSSProperties } from 'vue'
const router = useRouter()
// Props
const props = defineProps<{
  widgetOptions: any
  isPreview?: Boolean
  tenantId?: number
  isShare?: boolean
}>()

const emit = defineEmits([])

const setupOption = computed(() => {
  return props.widgetOptions.setup
})

const tableData = ref<any[]>([])

// 计算样式
const computedHeaderStyle = computed<CSSProperties>(() => ({
  color: setupOption.value.hFontColor,
  fontWeight: setupOption.value.hFontWeight,
  fontSize: `${setupOption.value.hFontSize}px`,
  letterSpacing: `${setupOption.value.hLetterSpacing}em`,
  backgroundColor: setupOption.value.hBackgroundColor,
  textAlign: setupOption.value.hTextAlign,
  lineHeight: `${setupOption.value.rowHeight}px`
}))

const computedBodyStyle = computed<CSSProperties>(() => ({
  color: setupOption.value.bFontColor,
  fontWeight: setupOption.value.bFontWeight,
  fontSize: `${setupOption.value.bFontSize}px`,
  letterSpacing: `${setupOption.value.bLetterSpacing}em`,
  textAlign: setupOption.value.bTextAlign,
  lineHeight: `${setupOption.value.rowHeight}px`
}))

const bodyTableBg = (index) => {
  let styleJson = {}
  if (index % 2) {
    styleJson['background-color'] = setupOption.value.bEvenBackgroundColor
  } else {
    styleJson['background-color'] = setupOption.value.bOddBackgroundColor
  }
  return styleJson
}

const getTaskData = async () => {
  const params = {
    pageNo: 1,
    pageSize: 100
  }
  if (props.isShare) {
    const res = await TaskApi.getAllTaskListByTenantId(props.tenantId)
    tableData.value = res
  } else {
    const res = await TaskApi.getTaskPage(params)
    tableData.value = res.list
  }
}

const goTaskDetail = (item) => {
  const routeUrl = router.resolve({
    path: '/task/detail',
    query: { id: item.id }
  })
  window.open(routeUrl.href, '_blank')
}

onMounted(() => {
  if (props.isPreview) {
    getTaskData()
  } else {
    tableData.value = props.widgetOptions.data.taskData
  }
})
</script>

<style scoped lang="scss">
.table-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .task-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    table-layout: fixed; // 保持列宽一致
    th,
    td {
      padding: 0 5px;
    }
  }

  .table-head-wrap {
    overflow: hidden;
  }

  .table-body-wrap {
    flex: 1;
    overflow-y: auto;

    tr {
      cursor: pointer;
      td {
        &:nth-child(1),
        &:nth-child(2) {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
